Wir hatten uns das letzte Mal mit einem Web Server und Scripting Framework namens Bottle beschäftigt und wir hatten zwei Dinge gesehen.

Das eine war Routing. Wenn wir eine Web Application bauen, dann müssen wir irgendwie sicherstellen, dass die auf die richtigen Pfade, die richtigen Dinge antwortet.

Der Mechanismus ist da sehr einfach. Man baut Funktionen, die die Antwort als HTML String zusammensetzen und mit dieser Dekoration addRoute binden wir diese Funktionen an irgendwelche Pfade auf dem Server.

Sie erinnern sich, die URL besteht aus einem HTTP oder HTTPS. Dann kommt eine Authority, also ein Domain Name bei uns hier in typischer Weise Local Host und danach kommt die Pfad Komponente und danach kann diese Query Komponente kommen.

Hier sagen wir auf welche Pfade geantwortet werden will und in den Funktionen sagen wir wie. Dann gibt es mehrere Möglichkeiten.

Es ist sehr einfach, indem man einfach den Pfad angebt oder man kann mehrere Pfade angeben und man kann auch hier drin sogenannte Wildcards angeben, die man dann hinterher in der Funktion wieder verwenden kann, um die Antwort zu basteln.

Dazu einige Beispiele gesehen. Da kann man allerlei Schabernack treiben mit den Wildcards, die kann man auf gewisse Datentypen einschränken, die kann man auf gewisse reguläre Ausdrücke einschränken.

Man kann mehrere von Wildcards haben und da kann man relativ fein Granular sagen, was man antworten will. Typischerweise verschiedene Routes haben wiederum verschiedene Funktionen, sodass man die Antwort anpassen kann.

Das ist die eine Sache. Wir hatten uns eine Login Methode angeguckt, indem man einerseits den Login Bildschirm mit einem Get antwortet und auf den Login Vorgang dann mit einem Post machen.

Wir hatten uns angeguckt, warum man das so macht, nämlich aus Sicherheitsmöglichkeiten. Die zweite Sache, die wir uns beim letzten Mal angeguckt hatten, war sogenanntes Templating.

Templating als die Idee, dass man HTML Muster aufschreibt in einem HTML Editor, der uns hilft, die Sachen, die man angefangen hat, wieder zuzumachen und die Einrückungen hübsch zu machen usw.

Dann haben wir HTML gebaut mit Inseln aus Python. Man könnte das mit F-Strings machen, aber mit diesen Templating Mechanismen kann man das noch besser machen.

Da haben wir uns diese Beispiele angeguckt. Wir haben HTML, überwiegend HTML und ab und zu irgendwelchen Python-Krempel dazwischen.

Hier auch eine Liste, die Hunderte von Einträgen haben, die wir einfach in einen Python-Ausdruck einsperren.

Das einzige Unterschied zu den Python, was ich Ihnen beigebracht habe, ist, dass wir hier keine Keite-Indentierung mehr zum Beginn-End verwenden können, sondern dass wir hier einen expliziten End bei einem Efe oder so etwas machen müssen.

Die Idee ist, wir mischen zwei Sprachen, einmal die HTML-Sprache und einmal die Python-Sprache. Wenn man viel Python und wenig HTML macht, dann macht man HTML in Python.

Wenn man viel HTML und wenig Python hat, dann macht man das so. Typischerweise, wenn man das Interface von Web-Applications baut, hat man viel HTML und wenig Python.

Da sind solche Templating-Lösungen sehr angenehm. Wir hatten uns über Cookies unterhalten, als eine Möglichkeit Zustand zu managen.

Typischerweise für Logins und so weiter. Dann hatten wir unser Kontaktformular fertig gemacht. Ich hatte Ihnen gezeigt, das waren alles Sachen, die wir schon gesehen hatten.

Das Wichtige war dabei, dass man, wenn man bei dem Get, was aus diesem Kontaktformular herauskommt, die Daten übermittelt, was man dann hier wieder aufnehmen kann und Dinge tun kann.

Zum Beispiel, dass man etwas Hübsches zurückgibt. In diesem Fall kann man die Daten, die man aus dem Request hier übermittelt gekriegt hat, wieder aufnehmen.

Dann kann man den Benutzer angepasste Rückmeldung geben und zum Beispiel eine E-Mail abschicken.

Was wir hier sehen, ist das erste Mal, dass sich da auf dem Server auch tatsächlich etwas tut. Was sich da tut, ist natürlich abhängig von Ihrer Web-Application.

Das ist das, was man gerne haben möchte. Bei Ebay soll sich da tun, dass Leute etwas kaufen und etwas ersteigern. Bei Gmail sollen E-Mails abgeschickt werden.

Bei dem Text-Adventure, was wir als kleines Projekt haben, soll die nächste Seite angezeigt werden. Was da passiert, hängt von der Anwendung ab, die Sie sich vorstellen.

Aber irgendwas muss passieren, sonst würde man die Web-Application hier gar nicht anwenden wollen.

Gibt es zu Web-Applications noch irgendwelche Fragen?

Das ist ungefähr der Zustand des Webs vor 10, 15 Jahren. Wir können interaktive Dinge bauen, aber sie sind noch nicht sonderlich hübsch.

Wenn wir uns das Ganze in diesem Beispiel angucken, dann hat man hier sowas. Man kann eine Nachricht hier reinschreiben, aber schöner wäre es, wenn das größer wäre.

Schöner wäre es, wenn man etwas mit Farben machen könnte. Schöner wäre es auch, wenn man hier hinten zwei Ads drin hat, die sich das direkt beschwert.

Das kommt mir komisch vor. Wie man solche Sachen macht, wie man Sachen anhübscht, lernen wir heute. Wie man im Browser Direktberechnungen macht, lernen wir nächste Woche.

Das ist im Prinzip funktioniert alles. Jetzt wollen wir noch Sachen hübscher machen. Wir wollen Farben verwenden, wir wollen Layouten, wir wollen auf dem großen Screen das anders aussehen lassen als auf dem Smartphone.

Wir wollen das flexibel machen. Dafür braucht man etwas, das nennt sich Cascading Style Sheets. Die Idee dabei ist, dass wir HTML benutzen, um den Text zu beschreiben.

Dass wir eine andere Sprache benutzen, hatte ich irgendwann mal erklärt, dass wir ganz viele kleine Sprachen machen. Die uns sagt, wie das Ganze aussehen soll.

Was soll ich für Fonts benutzen, welche Farben will ich benutzen, welche Größen will ich haben. Bewegt sich das irgendwie auf der Seite.

Das sind typischerweise Sachen, die wir in HTML gar nicht so gut beschreiben können. In HTML können wir so etwas sagen wie folgender Text ist ein H2.

Eine Überschrift der Größe 2. Und der Browser sagt, wahrscheinlich will er das ein bisschen größer haben, also 14 Punkte und Fettdruck.

Linksbündig, flatterant, was weiß ich. Das ist aber etwas, das ist fest eingestellt im Browser. Es wäre doch schön, wenn wir das verändern könnten.

Das ist genau, was diese Cascading Style Sheets machen. Ich habe hier mal ein kleines Beispiel, wir werden hinterher an unserem Kontaktformular weitermachen.

Ich habe hier mal ein HTML drin, das ist ein ganz einfaches. Im Body steht einfach ein H1 mit CSS Beispiel, ein P mit Halloween WGS und das war's schon.

Normalerweise sieht das schwarz auf weiß, linksbündig, das H1 immer ein bisschen größer und fett.

Was wir jetzt neu machen, ist, dass wir in diese Datei, in diesem Fall in einem Style Element, diesem Element im Head Anweisungen dazu einbetten, wie dieses Beast hier aussehen soll.

Was sagen wir hier? Wir sagen, dass das Body Element eine Hintergrundfarbe haben soll, die D0E4FE heißt. Das stellt es raus, dass es ein bisschen kranklich aussehen, das hellblau.

Normalerweise nehmen wir das weiß, aber wir können die Hintergrundfarbe überschreiben.

Wir können sagen, nimm stattdessen so ein kränkliches hellblau. Außerdem, für ein H1 Element, das da, nimm die Farbe orange und rücke den Text ein und zwar zentriert.

Also, es wird orange und wird zentriert eingestellt. Und für P hätte ich gerne einen anderen Font, in diesem Fall diesen Sans Riff-Font hier und ich hätte den gerne 20 Pixel hoch.

Das ist etwas, was wir noch nicht gesehen haben. Wir haben hier, wir sagen, nichts am Text verändert. Wir haben auch nichts daran geändert, dass CSS Example eine Überschrift ist.

Es ist weiterhin eine Überschrift. Wir haben nur überschrieben, wie sie dargestellt werden soll.

Das heißt, was wir hier in HTML machen, ist letztlich, dass wir die Information, wie die Funktion einzelner Textteile ist, trennen davon, wie sie aussieht.

Das hat verschiedene Vorteile. Der eine Vorteil ist, dass wir sozusagen einmal festlegen, wie soll mein Text sein.